<template>
  <dv-border-box-8 style="padding-top: 10px">
    <dv-decoration-7 style="width: 100%; height: 30px"
      >能耗总览</dv-decoration-7
    >
    <el-row>
      <el-col :span="8">
        <div id="main1" style="width: 100%; height: 250px"></div>
      </el-col>
      <el-col :span="8">
        <div id="main2" style="width: 100%; height: 250px"></div>
      </el-col>
      <el-col :span="8">
        <div id="main3" style="width: 100%; height: 250px"></div>
      </el-col>
    </el-row>
  </dv-border-box-8>
</template>

<script>
export default {
  name: "Dashboard",
  mounted() {
    this.initEchart();
  },
  data() {
    return {};
  },
  methods: {
    initEchart() {
      let myChart1 = this.$echarts.init(
        document.getElementById("main1"),
        "dark"
      );
      let myChart2 = this.$echarts.init(
        document.getElementById("main2"),
        "dark"
      );
      let myChart3 = this.$echarts.init(
        document.getElementById("main3"),
        "dark"
      );
      let option1 = {
        backgroundColor: "",
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "耗电量",
            type: "gauge",
            max: 100000000,
            itemStyle: { color: "#fac858" },
            // 进度条
            progress: {
              show: true,
            },
            // 刻度显示
            axisLabel: {
              show: false,
            },
            // 指针大小
            pointer: {
              width: 2,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              fontSize: 16,
              color: "#fac858",
              offsetCenter: ["0%", "30%"],
            },
            data: [
              {
                value: 92425000,
                name: "耗电量",
                title: {
                  offsetCenter: ["0%", "70%"],
                },
              },
            ],
          },
        ],
      };
      let option2 = {
        backgroundColor: "",
        tooltip: {
          formatter: "{a} <br/>{b} : {c}Kg",
        },
        series: [
          {
            name: "Pressure",
            max: 100000000,
            type: "gauge",
            itemStyle: {
              color: "#73fa58",
            },
            axisLabel: {
              // 刻度标签。
              show: false, // 是否显示标签,默认 true。
            },
            pointer: {
              //指针大小
              width: 2,
            },
            progress: {
              show: true,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              fontSize: 16,
              color: "#73fa58",
              offsetCenter: [0, "30%"],
            },
            data: [
              {
                value: 15232400,
                name: "耗水量",
                title: {
                  offsetCenter: ["0%", "80%"],
                },
              },
            ],
          },
        ],
      };
      let option3 = {
        backgroundColor: "",
        tooltip: {
          formatter: "{a} <br/>{b} : {c}Kg",
        },
        series: [
          {
            name: "Pressure",
            type: "gauge",
            max: 100000000,
            itemStyle: {
              color: "#5878fa",
            },
            axisLabel: {
              // 刻度标签。
              show: false, // 是否显示标签,默认 true。
            },
            pointer: {
              //指针大小
              width: 2,
            },
            progress: {
              show: true,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              fontSize: 16,
              color: "#5878fa",
              offsetCenter: [0, "30%"],
            },
            data: [
              {
                value: 81864576,
                name: "碳排放",
                title: {
                  offsetCenter: ["0%", "80%"],
                },
              },
            ],
          },
        ],
      };
      option1 && myChart1.setOption(option1);
      option2 && myChart2.setOption(option2);
      option3 && myChart3.setOption(option3);
    },
  },
};
</script>

<style scoped>
</style>
